<template>
  <el-tooltip class="item" effect="dark" :content="$t(tips)" placement="top">
    <el-button
      v-bind="$attrs"
      v-on="$listeners"
      @click.stop="handleClick"
      type="text"
      :style="{ color }"
      icon="iconfont icon-shanchu"
    ></el-button>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    color: {
      type: String
    },
    tips: {
      type: String,
      default: '删除'
    },
    confirmContent: {
      type: String,
      default: '此操作将永久删除该数据, 是否继续?'
    }
  },
  methods: {
    async handleClick() {
      const res = await this.$confirm(this.confirmContent, this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).catch(err => console.log(err))
      if (res === 'confirm') {
        this.$emit('success')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-button {
  ::v-deep {
    .el-icon-delete {
      font-weight: bold;
    }
  }
}
</style>
